const app = Vue.createApp({
  compilerOptions: {
    delimiters: ['[[', ']]'],
  },
  data() {
    return {
      data_ready: false,
      login: false,
      lock: false,
      input: "",
      data01: "linux",
      notes: [],
      content: "",
      username: "",
      // ws_url: 'ws://seadog.pythonabc.org:60558/ws/update/',
      // ws_url: 'wss://seadog.pythonabc.org:60558/noteboard/note/ws/update/',
      ws_url: 'wss://seadog.pythonabc.org:60555/noteboard/viminfo/ws/update/',
      // ws_url: 'ws://10.222.2.203:11203/note/ws/update/',
    };
  },
  methods: {
    ws_init: function () {
      let client_id = Date.now()
      var ws = new WebSocket(this.ws_url + client_id);
      ws.onerror = (event) => {
        console.log('ws connecting error')
      };
      ws.onclose = (event) => {
        console.log('ws connecting close')
      };
      ws.onmessage = (event) => {  // 这里必须用三角函数，以便将this指代vue实例
        data = event.data
        data = JSON.parse(data)
        data.body = atob(data.body)
        //  @done client should info server,operation type: del,add. server will react accordingly and return proper data
        if (data['operation'] == "add") {
          this.notes.unshift(data)
        } else if (data['operation'] == "del") {
          this.notes = this.notes.filter(item => item.id != data['id'])
        } else if (data['operation'] == "client-info") {
          this.ws_clients = data.clients
        } else {
          console.log('unkonw data ')
          console.log(data)
        }
      };
      this.ws = ws
    },
    // @mark 这里复制到系统剪贴板的方法已过期，后期看有更合适的办法没
    copy_to_clipboard(name) {
      var el = document.getElementById(name);
      el.select();
      document.execCommand('Copy');
    },
    on_del: function (id) {
      axios({
        url: "/noteboard/viminfo/" + id,
        method: "delete",
      }).then((res) => {
        // @note 由于已经通过server端websocket广播被删除的条目，这里有点儿重复，但是最好保留，以应对websocket被内网代理屏蔽的情况
        this.notes = this.notes.filter((item) => item.id != id);
      });
    },
    on_submit: function () {
      if (this.input) {
        axios({
          url: "/noteboard/viminfo/createnewviminfofrombrower",
          method: "post",
          data: {
            body: this.input,
          },
        }).then((res) => {
          //  @done client should info server,operation type: del,add. server will react accordingly and return proper data
          //  @todo 如果ws不起效时，是否能自动调用刷新页面
          // this.ws_sendMessage(this.input)  // @note 后端通过tortoise.signals来感知数据库变动，从而无需前端发送数据
          this.input = "";
          this.get_all_viminfo();
        });
      }
    },
    click_handler: function (id) {
      this.lock = true;
      this.content = this.notes.find((item) => item.id == id).body;
    },
    hover_handler: function (id) {
      if (!this.lock) {
        this.content = this.notes.find((item) => item.id == id).body;
      }
    },
    get_all_viminfo: function () {
      axios({
        url: "/noteboard/viminfo/allviminfo",
      })
        .then((res) => {
          this.notes = res.data.map(
            function (item) {
              item.body = atob(item.body)
              return item
            }
          );
          this.data_ready = true;
        })
        .catch((err) => {
          // @mark 应对需登录的情况，保留这些代码
          if (err.response.status == 401) {
            this.login = true;
            this.$confirm(
              "Token expired, Please login again!",
              "",
              "error"
            ).then((res) => {
              this.$router.push({
                name: "login",
              });
            });
          } else {
            this.alert("failed to get data from backend!");
          }
        });
    }
  },
  created() {
    this.get_all_viminfo();
    this.ws_init()
  },
})
const vm = app.mount('#app')
